﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxChart Scatter Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            // prepare chart data as an array
            var sampleData = [
                    { City: 'New York', SalesQ1: 330500, SalesQ2: 210500, YoYGrowth: 1.05 },
                    { City: 'London', SalesQ1: 120000, SalesQ2: 169000, YoYGrowth: 1.15 },
                    { City: 'Paris', SalesQ1: 205000, SalesQ2: 275500, YoYGrowth: 1.45 },
                    { City: 'Tokyo', SalesQ1: 187000, SalesQ2: 130100, YoYGrowth: 0.45 },
                    { City: 'Berlin', SalesQ1: 187000, SalesQ2: 113000, YoYGrowth: 1.65 },
                    { City: 'San Francisco', SalesQ1: 142000, SalesQ2: 102000, YoYGrowth: 1.25 },
                    { City: 'Chicago', SalesQ1: 171000, SalesQ2: 124000, YoYGrowth: 0.75 }
                ];

            // prepare jqxChart settings
            var settings = {
                title: "Sales by City in Q1 & Q2",
                description: "",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                colorScheme: 'scheme01',
                xAxis:
                {
                    dataField: 'City',
                    valuesOnTicks: false
                },
                valueAxis:
                {
                    minValue: 50000,
                    maxValue: 350000,
                    unitInterval: 50000,
                    title: {text: 'Sales ($)<br>'},
                    labels: {
                        formatSettings: { prefix: '$', thousandsSeparator: ',' },
                        horizontalAlignment: 'right'
                    }
                },

                seriesGroups:
                    [
                        {
                            type: 'scatter',
                            series: [
                                    { dataField: 'SalesQ1', symbolSize: 20, symbolType: 'circle', displayText: 'Sales in Q1'},
                                    { dataField: 'SalesQ2', symbolSize: 20, symbolType: 'diamond', displayText: 'Sales in Q2'}
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);

            var chart = $('#chartContainer').jqxChart('getInstance');

            // symbol selection drop down
            var symbolsList = ["circle", "diamond", "square", "triangle_up", "triangle_down", "triangle_left", "triangle_right"];
            $("#dropDownSerie1Symbol").jqxDropDownList({ source: symbolsList, selectedIndex: 2, width: '200', height: '25', dropDownHeight: 100 });

            $('#dropDownSerie1Symbol').on('change', function (event) {
                var value = event.args.item.value;
                chart.seriesGroups[0].series[0].symbolType = value;
                chart.update();
            });

            $("#dropDownSerie2Symbol").jqxDropDownList({ source: symbolsList, selectedIndex: 1, width: '200', height: '25', dropDownHeight: 100 });

            $('#dropDownSerie2Symbol').on('change', function (event) {
                var value = event.args.item.value;
                chart.seriesGroups[0].series[1].symbolType = value;
                chart.update();
            });

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width: 850px; height: 500px">
    </div>
    <table style="width: 550px">
        <tr>
            <td>
                <p style="font-family: Verdana; font-size: 12px;">Select Serie 1 Symbol:
                </p>
                <div id='dropDownSerie1Symbol'>
                </div>
            </td>
            <td>
                <p style="font-family: Verdana; font-size: 12px;">Select Serie 2 Symbol:
                </p>
                <div id='dropDownSerie2Symbol'>
                </div>
            </td>
        </tr>
    </table>

</body>
</html>
